<template>
	<view class="recycle_order_detail-container">
		<!-- Header -->
		<view class="recycle_order_detail-header">
			<!-- 订单取消 -->
			<template v-if="status == 6">
				<view class="recycle_order-close">{{ getOrderStatusTxt(status) }}</view>
			</template>
			<template v-else>
				<!-- 回收流程状态 -->
				<view class="recycle-process">
					<block v-for="(item, index) in steps">
						<view class="recycle-process-item">
							<!-- Icon -->
							<view class="recycle-process-icon">
								<template v-if="index < status">
									<view class="recycle-process-icon--success"></view>
								</template>
								<template v-else>
									<view class="recycle-process-icon--inaction"></view>
								</template>
							</view>
							<!-- Name -->
							<view class="recycle-process-name"
								:style="{color: index < status  ? '#000000' : '#999999'}">{{ item }}
							</view>
						</view>
					</block>

					<!-- Process line -->
					<view class="recycle-process-line" :style="{
                          left: `calc(100% / ${steps.length} / 2)`, 
                          width: `calc(100% / ${steps.length} * ${steps.length - 1})`
                      }">
						<view class="recycle-process-line--active"
							:style="{width: `calc(100% / ${steps.length - 1} * ${status})`}" />
						<view class="recycle-process-line--inaction" />
					</view>
				</view>

				<!-- 订单状态信息 -->
				<view>
					<!-- 订单状态 -->
					<view class="order-status">
						<view class="lg normal">
							<template v-if="status == 5">
								<text>已拒绝</text>
								<text class="ornament sm ml20">实物不符</text>
							</template>
							<template v-else>
								<text>{{ getOrderStatusTxt(status) }}</text>
							</template>
						</view>
						<template v-if="status == 0">
							<view class="ornament nr">
								<u-count-down :timestamp="getCountdown(orderInfo.create_time, orderInfo.order_end_time)"
									:show-days="false" color="#FF2C3C" separator-color="#FF2C3C"
									@end="handleCloseOrder" />
							</view>
						</template>
					</view>
					<!-- 物流信息 -->
					<view class="order-logistics">
						<view class="order-logistics-item">
							<view class="nr muted" style="min-width: 146rpx">收件地址</view>
							<view class="normal">
								<view class="row nr">
									<view>{{ orderInfo.plat_info.name }}</view>
									<view class="ml10">{{ orderInfo.plat_info.mobile }}</view>
								</view>
								<view class="sm mt10">{{ orderInfo.plat_info.address }}</view>
							</view>
						</view>
						<view class="order-logistics-item">
							<view class="nr muted" style="min-width: 146rpx">快递单号</view>
							<view class="normal">
								<view class="nr">{{ orderInfo.delivery_name }}</view>
								<view class="sm mt10 row" @tap="copyExpressCode">
									<text>{{ orderInfo.delivery_num }}</text>
									<u-icon class="ml10" name="file-text" color="#707070" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>


		<!-- Main -->
		<view>
			<view class="order-goods mt20 normal">
				<view class="lg">评估情况</view>
				<view class="row-between mt20 mb20" @tap="goGoods(orderInfo.id)">
					<u-image width="160" height="160" :src="goodsHeaderImg" />
					<view class="order-goods-info">
						<view class="md line1" style="width: calc(100% - 20rpx - 32rpx);">{{ orderInfo.goods_name }}
						</view>
						<view class="line1 xs muted mt20" style="width: calc(100% - 20rpx - 32rpx);">
							{{ orderInfo.buy_money }}
						</view>
					</view>
					<!-- <u-icon name="arrow-right" color="#707070" /> -->
				</view>
				<view class="order-goods-price">
					<view class="row-between">
						<text class="sm muted">预估价</text>
						<view>
							<text class="xs">¥</text>
							<text class="xxl">{{ orderInfo.yw_money }}</text>
						</view>
					</view>
					<template v-if="status >= 2">
						<view class="row-between">
							<text class="sm muted">质检价</text>
							<view @tap="isQCPricePopup = true">
								<u-icon class="mr5" name="question-circle" color="#999999" />
								<text class="xs ornament">¥</text>
								<text class="xxl ornament">{{ orderInfo.pt_money }}</text>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<!-- footer -->
		<view>
			<view class="order-info mt20 nr black">
				<view class="row mt20">
					<view class="muted mr30">订单编号</view>
					<view>
						<text>{{ orderInfo.order_sn }}</text>
						<text class="primary ml20" @tap="copyOrderCode">复制</text>
					</view>
				</view>
				<view class="row mt20">
					<view class="muted mr30">下单时间</view>
					<view>{{ orderInfo.create_time }}</view>
				</view>
			</view>
		</view>

		<!-- Widget -->
		<view>
			<!-- 底部按钮 -->
			<view class="recycle-order-widget">
				<view v-if="status<4" class="widget-btn--unactive mr20" @tap="isCloseOrderModal = true">取消订单</view>
			</view>

			<!-- 联系客服 -->
			<view class="button--server" @tap="onContactServe">
				<u-icon name="server-fill" />
			</view>

			<!-- 质检价的温馨提示Propup -->
			<u-popup v-model="isQCPricePopup" mode="center" :closeable="true">
				<view class="qc-tips-popup">
					<view class="row-center xxl normal">温馨提示</view>
					<view class="lg normal mt30" style="line-height: 1.5em;">
						<text style="font-weight: 500;">质检价：</text>
						<text>
							是根据您的手机情况而得出的实际价格，与预估的价格有些差距，可能是因为手机外观、屏幕损坏、运行顺畅等原因有关；
							如在可接受价格的范围内，请点击确认继续以下操作
						</text>
					</view>
					<view class="qc-tips-popup-button mt30" @tap="isQCPricePopup = false">好的，我知道了</view>
				</view>
			</u-popup>

			<!-- 换租 -->
			<u-popup v-model="showLendLeasePopup" mode="center" border-radius="20">
				<view class="lend_lease">
					<view class="lend_lease-title">温馨提示</view>
					<view class="lend_lease-info-item">
						<view class="nr normal">质检价</view>
						<view class="row">
							<view class="xs line-through muted mr20">预估价 ¥{{ orderInfo.total_amount }}</view>
							<view class="lg">¥{{ orderInfo.order_amount }}</view>
						</view>
					</view>
					<view class="lend_lease-info-item">
						<view class="nr normal">可收入</view>
						<view class="xxl">¥{{ orderInfo.order_amount }}</view>
					</view>
					<view class="lend_lease-widget">
						<view class="lend_lease-cancel" @tap="showLendLeasePopup = false">取消</view>
						<view class="lend_lease-confirm" @tap="goLendLease">确认</view>
					</view>
				</view>
			</u-popup>


			<!-- 订单取消 Modal -->
			<u-modal v-model="isCloseOrderModal" :show-cancel-button="true" content="取消订单" :show-title="false"
				@confirm="onOrderClose" />

		</view>
	</view>
</template>


<script>
	import {
		getQuHuanDetail,
		postOrderClose,
		postConfirmDeal
	} from '@/api/recycle.js';

	import {
		copy
	} from '@/utils/tools'

	export default {
		data() {
			return {
				// 回收流程
				steps: [
					'待估价',
					'待用户接受评估',
					'待寄出',
					'待验收',
					'已完成'
				],
				status: 0, // 当前订单状态
				isQCPricePopup: false, // 质检价温馨提示的弹出弹出层
				showLendLeasePopup: false, // 换租Popup
				isCloseOrderModal: false, // 取消订单的模态窗口
				orderInfo: {}, // 订单数据
			}
		},
		computed: {
			goodsHeaderImg() {
				let url = null;
				if (this.orderInfo.abs_image && this.orderInfo.abs_image.img.length > 0) {
					url = this.orderInfo.abs_image.img[0];
				}
				return url;
			}
		},
		methods: {
			// 获取订单当前状态信息文本
			// 0待平台估价,1待客户接受平台估价,2待客户寄出,3待平台验收,4完成,5拒收并原路退回,6关闭
			getOrderStatusTxt(status) {
				switch (status) {
					case 3:
						return '下单成功，待平台验收';
					case 4:
						return '订单完成';
					case 5:
						return '已拒收并原路退回';
					case 6:
						return '订单已关闭';
				}
			},

			// 待寄出倒计时
			getCountdown(timestamp, hour) {
				const countDown = hour * 60 * 60;
				const end = timestamp + countDown;
				const now = new Date().getTime() / 1000;
				return end - now;
			},

			// 复制收件地址
			copyReceiveAddress() {
				const data = this.orderInfo.palt;
				const content = `收件人:${ data.user_name } 联系方式:${ data.user_mobile } 收件地址:${ data.user_address }`;
				copy(content);
			},

			// 复制订单编号
			copyOrderCode() {
				copy(this.orderInfo.order_sn)
			},

			// 复制物流单号
			copyExpressCode() {
				copy(this.orderInfo.delivery_num)
			},

			// 跳转商品评估信息
			goGoods(id) {
				return;
				uni.navigateTo({
					url: '/bundle/pages/recycle_goods_detail/recycle_goods_detail' +
						'?id=' + id
				})
			},

			// 跳转到换租详情
			goLeaseOrderDetail() {
				uni.navigateTo({
					url: '/bundle/pages/lease_order_detail/lease_order_detail' +
						'?id=' + this.orderInfo.lease_order_id
				})
			},

			// 跳转填写订单号
			goEditLogistics() {
				uni.navigateTo({
					url: '/bundle/pages/recycle_logistics_form/recycle_logistics_form' +
						'?id=' + this.orderInfo.id
				})
			},

			// 查看物流
			goExpressProgress() {
				uni.navigateTo({
					url: '/bundle/pages/recycle_express_progress/recycle_express_progress' +
						'?id=' + this.orderInfo.id
				})
			},

			// 跳转换租
			goLendLease() {
				this.showLendLeasePopup = false;
				uni.navigateTo({
					url: '/bundle/pages/lendlease_periods/lendlease_periods' +
						'?id=' + this.orderInfo.id
				})
			},

			// 点击订单取消按钮
			onOrderClose() {
				const id = this.orderInfo.id;
				postOrderClose({
					ro_id: id
				}).then(res => {
					if (res.code != 1) return;
					uni.showToast({
						title: '订单已取消'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				});
			},

			// 点击联系客服
			onContactServe() {
				uni.navigateTo({
					url: '/bundle/pages/contact_offical/contact_offical'
				})
			},
		},

		onLoad(options) {
			// 请求订单详情数据
			getQuHuanDetail({
				id: options.id
			}).then(res => {
				if (res.code != 1) return this.$toast({
					title: res.msg
				});
				this.orderInfo = res.data;
				this.status = res.data.status;
			});
		},

	}
</script>


<style scoped>
	.recycle_order_detail-container {
		margin: 20rpx;
		padding-bottom: 100rpx;
	}

	.recycle_order_detail-header {
		padding: 30rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.recycle_order-close {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.recycle-process {
		padding: 30rpx 0;
		position: relative;
		display: flex;
	}

	.recycle-process-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.recycle-process-icon {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		padding: 0 10rpx;
		background-color: #FFFFFF;
	}

	.recycle-process-name {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.recycle-process-icon--success {
		width: 40rpx;
		height: 40rpx;
		background: url(../../static/images/logistics_success.png) no-repeat;
		background-size: 100% 100%;
	}

	.recycle-process-icon--inaction {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background-color: #D7D7D7;
	}

	.recycle-process-line {
		position: absolute;
		height: 40rpx;
		overflow: hidden;
	}

	.recycle-process-line--active,
	.recycle-process-line--inaction {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		height: 4rpx;
		width: 100%;
	}

	.recycle-process-line--active {
		z-index: 2;
		width: 80%;
		background-color: #FF2C3C;
	}

	.recycle-process-line--inaction {
		z-index: 1;
		background-color: #D7D7D7;
	}


	/* Order Status */
	.order-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.order-logistics-item {
		display: flex;
		margin-top: 30rpx;
	}


	.order-goods {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.order-goods-info {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		overflow: hidden;
	}

	.order-goods-price {
		/*        display: flex;
        align-items: center;
        justify-content: space-between; */
		padding-top: 20rpx;
		border-top: 1rpx solid #E5E5E5;
	}

	.order-goods-price-line {
		width: 200rpx;
		border: 1rpx dashed #24A3FF;
	}

	.order-info {
		padding: 30rpx 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}


	.recycle-order-widget {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	}

	.widget-btn--unactive,
	.widget-btn--active,
	.widget-btn--normal {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 188rpx;
		height: 68rpx;
		border-radius: 50px;
		font-size: 28rpx;
	}

	.widget-btn--unactive {
		box-shadow: 0 0 0 1px #D7D7D7;
		color: #666666;
	}

	.widget-btn--active {
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.widget-btn--normal {
		box-shadow: 0 0 0 1px #24A3FF;
		color: #24A3FF;
	}

	.qc-tips-popup {
		width: 640rpx;
		padding: 30rpx 50rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	.qc-tips-popup-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 74rpx;
		font-size: 32rpx;
		border-radius: 50px;
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.button--server {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 42rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #FFFFFF;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, .3);
	}


	.lend_lease {
		width: 640rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
	}

	.lend_lease-title {
		padding-bottom: 30rpx;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #333333;
	}

	.lend_lease-widget {
		display: flex;
		justify-content: space-between;
		margin-top: 84rpx;
	}

	.lend_lease-cancel,
	.lend_lease-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 268rpx;
		height: 74rpx;
		font-size: 32rpx;
		border-radius: 50px;
	}

	.lend_lease-cancel {
		background-color: #F6F6F6;
		color: #666666;
	}

	.lend_lease-confirm {
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.lend_lease-info-item {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
</style>